<template>
    <div class="Box">
        <div class="title"><slot name="title"></slot></div>
        <div ref="pieRef" v-show="!isNull"></div>
        <el-empty description="没有数据噢" v-show="isNull" :image-size="120"/>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, defineProps } from 'vue'

interface Props{
    option:any
}
const props = defineProps<Props>()
const pieRef = ref()
let isNull = ref<boolean>(false)
function initEcharts() {
    const chart = echarts.init(pieRef.value)
    if (!props.option.series[0].data.length) {
        isNull.value = true
    } else {
        isNull.value = false
    }
    chart.setOption(props.option)
}
defineExpose({
    initEcharts
})

</script>

<style lang="scss" scoped>
.Box{
    width: 100%;
    height: 100%;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: var(--el-box-shadow);
    user-select: none;
    & div:nth-child(2){
        width: 100%;
        height: calc(100% - 30px - 20px);
    }
}
.title{
    width: 100%;
    text-align: left;
    color: #676767;
    font-size: 18px;
    font-weight: 800;
    position: relative;
    padding-left: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--el-border-color);
    &::after{
        content: '';
        position: absolute;
        border-radius: 10px;
        left: 0;
        top: 1px;
        width: 5px;
        height: 100%;
        background: #73c0de;

    }
}
</style>